<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8">
  <title>avatar-animator</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;800&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg: #f9f9f9;
      --text: #212529;
      --card-bg: #ffffff;
      --input-bg: #e9ecef;
      --accent: #0d6efd;
    }

    .dark-mode {
      --bg: #121212;
      --text: #f1f1f1;
      --card-bg: #1e2a38;
      --input-bg: #2a3b4d;
      --accent: #00c9a7;
    }

    html,
    body {
      min-height: 100%;
      background-color: var(--bg);
      color: var(--text);
      font-family: "Roboto", sans-serif;
    }

    body {
      display: flex;
      flex-direction: column;
    }

    .container {
      flex: 1;
      background-color: var(--bg);
    }

    h1 {
      font-weight: 800;
      font-size: 2.5rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    }

    .card {
      background-color: var(--card-bg);
      border: none;
      border-radius: 1rem;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }

    .form-control,
    .form-select,
    textarea {
      background-color: var(--input-bg);
      color: var(--text);
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 0.5rem;
    }

    .form-control:focus,
    .form-select:focus,
    textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    }

    label {
      font-weight: 600;
    }

    textarea {
      resize: vertical;
      min-height: 160px;
    }

    .loading {
      position: absolute;
      top: 50%;
      right: 1rem;
      transform: translateY(-50%);
    }

    .small-text {
      font-size: 0.75rem;
      opacity: 0.8;
    }

    .btn-group-responsive {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .progress-bar {
      background-color: var(--accent);
    }

    .toggle-mode {
      position: fixed;
      top: 1rem;
      right: 1rem;
      z-index: 999;
    }

    @media (max-width: 576px) {
      .toggle-mode {
        top: auto;
        bottom: 1rem;
        right: 1rem;
      }

      .container {
        padding-top: 3rem;
      }

      h1 {
        font-size: 1.75rem;
      }

      .btn-group-responsive {
        flex-direction: column;
        align-items: stretch;
      }
    }

    html.dark-mode,
    body.dark-mode {
      background-color: var(--bg) !important;
    }

    .audio-disabled {
      pointer-events: none;
      opacity: 0.6;
    }

    .video-disabled {
      pointer-events: none;
      opacity: 0.6;
    }

    .chevron {
      display: inline-block;
      transition: transform 0.3s ease;
    }

    [data-bs-toggle="collapse"][aria-expanded="true"] .chevron {
      transform: rotate(0deg);
    }

    [data-bs-toggle="collapse"][aria-expanded="false"] .chevron {
      transform: rotate(-90deg);
    }
  </style>
</head>

<body>

  <button class="btn btn-sm btn-outline-secondary toggle-mode" onclick="toggleTheme()">Toggle thème</button>

  <div class="container p-2">
    <h1 class="text-center text-primary ">avatar-animator</h1>

    <div class="row g-3 mb-4">
      <div class="col-12 col-lg-3">
        <label class="form-label">Nom / Titre</label>
        <input type="text" class="form-control text-start">
      </div>
      <div class="col-12 col-lg-3">
        <label class="form-label">Type</label>
        <select class="form-select">
          <option selected value="biography">Biographie de réalisateur</option>
          <option value="summary">Résumé de film</option>
        </select>
      </div>
      <div class="col-12 col-lg-3">
        <label class="form-label">Style</label>
        <select class="form-select">
          <option value="casual">Décontracté</option>
          <option value="cinematic">Cinématographique</option>
          <option value="dialog">Dialogué</option>
          <option value="dramatic">Dramatique</option>
          <option value="emotional">Émotionnel</option>
          <option value="historical">Historique</option>
          <option value="humorous">Humoristique</option>
          <option value="inspirational">Inspirant</option>
          <option value="interview">Interview fictive</option>
          <option value="marketing">Marketing</option>
          <option value="minimal">Minimaliste</option>
          <option value="narrative">Narratif</option>
          <option value="neutral" selected>Neutre</option>
          <option value="poetic">Poétique</option>
          <option value="press">Journalistique</option>
          <option value="satirical">Satirique</option>
          <option value="scientific">Scientifique</option>
          <option value="technical">Technique</option>
        </select>
      </div>
      <div class="col-12 col-lg-3">
        <label class="form-label">Longueur</label>
        <select class="form-select">
          <option value="short">Courte</option>
          <option value="medium" selected>Moyenne</option>
          <option value="long">Longue</option>
        </select>
      </div>
    </div>

    <div class="row g-4">
      <div class="col-md-6">

        <div class="card p-4 m-1">
          <div class="d-flex justify-content-between align-items-center mb-3 btn-group-responsive">
            <button class="btn btn-primary">Texte - ChatGPT</button>
            <button class="btn btn-outline-primary">Réinitialiser</button>
            <span class="badge bg-primary">Texte Ok ✓</span>
            <span class="text-primary small-text ms-auto">Réponse en 1.2s</span>
            <button class="btn btn-sm btn-link text-decoration-none p-0 ms-2" data-bs-toggle="collapse"
              data-bs-target="#content-chatgpt" aria-expanded="true">
              <span class="chevron">▼</span>
            </button>
          </div>
          <div class="position-relative collapse show" id="content-chatgpt">
            <div class="d-flex align-items-center gap-3">
              <div class="progress flex-grow-1">
                <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
              </div>
              <div class="spinner-border text-primary" role="status" style="width: 1.5rem; height: 1.5rem;">
                <span class="visually-hidden">Chargement...</span>
              </div>
            </div>
            <div class="mt-3">
              <div class="alert alert-info alert-dismissible" role="alert">
                📨 Requête envoyée à OpenAI, en attente de réponse...
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
              <div class="alert alert-warning alert-dismissible" role="alert">
                ⏳ Réponse de OpenAI en cours de traitement...
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
              <div class="alert alert-danger alert-dismissible" role="alert">
                ❌ Une erreur est survenue lors de l'appel à OpenAI.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
              <div class="alert alert-success alert-dismissible" role="alert">
                ✅ Réponse de OpenAI reçue avec succès.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
            </div>
            <div class="mt-3">
              <textarea class="form-control">Résultat généré ici...</textarea>
            </div>
          </div>
        </div>
        <div class="card p-4 m-1">
          <div class="d-flex justify-content-between align-items-center mb-3 btn-group-responsive">
            <button class="btn btn-outline-primary">Voix - ElevenLabs</button>
            <span class="badge bg-primary">Voix OK ✓</span>
            <span class="text-primary ms-auto small-text">Réponse en 2.1s</span>
            <button class="btn btn-sm btn-link text-decoration-none p-0 ms-2" data-bs-toggle="collapse"
              data-bs-target="#voice-chatgpt" aria-expanded="true">
              <span class="chevron">▼</span>
            </button>
          </div>
          <div class="position-relative collapse show" id="voice-chatgpt">
            <div class="d-flex align-items-center gap-3">
              <div class="progress flex-grow-1">
                <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
              </div>
              <div class="spinner-border text-primary" role="status" style="width: 1.5rem; height: 1.5rem;">
                <span class="visually-hidden">Chargement...</span>
              </div>
            </div>
            <div class="mt-3">
              <div class="alert alert-info alert-dismissible" role="alert">
                📨 Requête envoyée à ElevenLabs en attente de réponse...
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
              <div class="alert alert-warning alert-dismissible" role="alert">
                ⏳ Réponse de ElevenLabs en cours de traitement...
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
              <div class="alert alert-danger alert-dismissible" role="alert">
                ❌ Une erreur est survenue lors de l'appel à ElevenLabs.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
              <div class="alert alert-success alert-dismissible" role="alert">
                ✅ Réponse de ElevenLabs reçue avec succès.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
            </div>
            <div class="mt-2">
              <audio controls class="w-100">
                <source src="./assets/voices/ridley-scott-chatgpt.mp3" type="audio/mpeg">
                Votre navigateur ne supporte pas l'audio.
              </audio>
            </div>
          </div>
        </div>

        <div class="card p-4 mt-3">
          <div class="d-flex align-items-center gap-2 btn-group-responsive">
            <button class="btn btn-outline-primary">Avatar - JoggAI</button>
            <button class="btn btn-outline-primary">🔍 Vérifier</button>
            <span class="badge bg-primary">Avatar OK ✓</span>
            <span class="text-primary ms-auto small-text">Réponse en 3.4s</span>
            <button class="btn btn-sm btn-link text-decoration-none p-0 ms-2" data-bs-toggle="collapse"
              data-bs-target="#avatar-chatgpt" aria-expanded="true">
              <span class="chevron">▼</span>
            </button>
          </div>
          <div class="collapse show" id="avatar-chatgpt">
            <div class="mt-3">
              <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
              </div>
            </div>
            <div class="mt-3">
              <div class="alert alert-info alert-dismissible" role="alert">
                📨 Requête envoyée à JoggAI, en attente de réponse...
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
              <div class="alert alert-warning alert-dismissible" role="alert">
                ⏳ Réponse de JoggAI en cours de traitement...
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
              <div class="alert alert-success" role="alert">
                ✅ Vidéo disponible et prête à être lue
              </div>
              <div class="alert alert-warning alert-dismissible" role="alert">
                ⏳ Vidéo en cours de génération, réessayez plus tard
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
              <div class="alert alert-danger alert-dismissible" role="alert">
                ❌ Échec lors de la vérification de la vidéo
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
              <div class="alert alert-danger alert-dismissible" role="alert">
                ❌ Une erreur est survenue lors de l'appel à JoggAI.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
              <div class="alert alert-success alert-dismissible" role="alert">
                ✅ Réponse de JoggAI reçue avec succès.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
            </div>
            <div class="mt-3">
              <video controls class="w-100 rounded" poster="./assets/videos/ridley-scott-chatgpt.png">
                <source src="./assets/videos/ridley-scott-chatgpt.mp4" type="video/mp4">
                Votre navigateur ne supporte pas la vidéo.
              </video>
            </div>
          </div>
        </div>

      </div>

      <div class="col-md-6">
        <div class="card p-4 m-1">
          <div class="d-flex justify-content-between align-items-center mb-3 btn-group-responsive">
            <button class="btn btn-success">Texte - Claude</button>
            <button class="btn btn-outline-success">Réinitialiser</button>
            <span class="badge bg-success">Texte Ok ✓</span>
            <span class="text-success small-text ms-auto">Réponse en 1.5s</span>
            <button class="btn btn-sm btn-link text-decoration-none p-0 ms-2 text-succes" data-bs-toggle="collapse"
              data-bs-target="#content-claude">
              <span class="chevron text-success">▼</span>
          </div>
          <div class="position-relative collapse show" id="content-claude">
            <div class="d-flex align-items-center gap-3">
              <div class="progress flex-grow-1">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 75%">
                </div>
              </div>
              <div class="spinner-border text-success" role="status" style="width: 1.5rem; height: 1.5rem;">
                <span class="visually-hidden">Chargement...</span>
              </div>
            </div>
            <div class="mt-3">
              <textarea class="form-control">Résultat généré ici...</textarea>
            </div>
          </div>
        </div>
        <div class="card p-4 m-1">
          <div class="d-flex justify-content-between align-items-center mb-3 btn-group-responsive">
            <button class="btn btn-outline-success">Voix - ElevenLabs</button>
            <span class="badge bg-success">Voix OK ✓</span>
            <span class="text-success ms-auto small-text">Réponse en 2.1s</span>
            <button class="btn btn-sm btn-link text-decoration-none p-0 ms-2 text-succes" data-bs-toggle="collapse"
              data-bs-target="#voice-claude">
              <span class="chevron text-success">▼</span>
          </div>
          <div class="position-relative collapse show" id="voice-claude">
            <div class="d-flex align-items-center gap-3">
              <div class="progress flex-grow-1">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 75%">
                </div>
              </div>
              <div class="spinner-border text-success" role="status" style="width: 1.5rem; height: 1.5rem;">
                <span class="visually-hidden">Chargement...</span>
              </div>
            </div>
            <div class="mt-2">
              <audio controls class="w-100">
                <source src="./assets//voices/ridley-scott-claude.mp3" type="audio/mpeg">
                Votre navigateur ne supporte pas l'audio.
              </audio>
            </div>
            <div class="mt-2">
              <audio controls class="w-100 audio-disabled">
                <source src="./assets//voices/ridley-scott-claude.mp3" type="audio/mpeg">
                Votre navigateur ne supporte pas l'audio.
              </audio>
            </div>
          </div>

        </div>

        <div class="card p-4 mt-3">
          <div class="d-flex align-items-center gap-2 btn-group-responsive">
            <button class="btn btn-outline-success">Avatar - JoggAI</button>
            <button class="btn btn-outline-success">🔍 Vérifier</button>
            <span class="badge bg-success">Avatar OK ✓</span>
            <span class="text-success ms-auto small-text">Réponse en 3.2s</span>
            <button class="btn btn-sm btn-link text-decoration-none p-0 ms-2 text-succes" data-bs-toggle="collapse"
              data-bs-target="#avatar-claude">
              <span class="chevron text-success">▼</span>
          </div>
          <div class="collapse show" id="avatar-claude">
            <div class="mt-3">
              <video controls class="w-100 rounded" poster="./assets/videos/ridley-scott-claude.png">
                <source src="./assets/videos/ridley-scott-claude.mp4" type="video/mp4">
                Votre navigateur ne supporte pas la vidéo.
              </video>
            </div>
            <div class="mt-3">
              <video controls class="w-100 rounded video-disabled" poster="./assets/videos/ridley-scott-claude.png">
                <source src="./assets/videos/ridley-scott-claude.mp4" type="video/mp4">
                Votre navigateur ne supporte pas la vidéo.
              </video>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>

  <script>

    function toggleTheme() {
      document.body.classList.toggle('dark-mode');
      document.documentElement.classList.toggle('dark-mode');
    }
  </script>

</body>

</html>